<template>
    <!-- 抽屉 -->
    <!-- 这里不能用v-modele的原因是isShow是父组件的值 不能改变 -->
    <a-drawer :visible="isShow" width="11em" class="custom-class" style="font-size:16px" title="热力图的参数：
" :mask="false" @close="handleClose" :destroyOnClose="true" placement="right">
        <div style="max-height: 300px; display: flex; 
    align-items: center;">
            <!-- 竖向排列 -->
            <div style="writing-mode:vertical-lr; margin-left: 30px; font-size:16px">热点半径（radius size）</div>
            <div style="height: 300px; ">
                <a-slider v-model:value="radiusValue" @change="radiusChange" :max="50" vertical />
            </div>
            <!-- 竖向排列 -->
            <div style="writing-mode:vertical-lr;font-size:16px">模糊尺寸（blur size）</div>
            <div style="height: 300px; ">
                <a-slider v-model:value="blurValue" @change="blurChange" vertical :max="50" />
            </div>
        </div>
    </a-drawer>
</template>
<script setup>
// 引入地图
import { watch, ref, toRefs } from 'vue';
/* 从pinia引入地图 */
import { useMapStore } from 'stores/mapStore.js'
/* store数据响应式 */
import { storeToRefs } from 'pinia';
const { map } = storeToRefs(useMapStore())
const radiusValue = ref(10);
const blurValue = ref(15);
/* 接收父组件的数据 */
const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
})
const vector = ref(null)
/* 拿到父组件的数据 */
let { isShow } = toRefs(props)
const emit = defineEmits(['changeIsShow'])
/* 点击关闭热力图 */
const handleClose = bool => {
    // isShow.value = false;
    emit('changeIsShow', false)
    map.value.removeLayer(vector.value);
    console.log("图层已清除");
    console.log(map.value.getLayers());
    /* 重置状态 */
    vector.value = null
};
watch(isShow, (newValue) => {
    console.log("watch" + newValue);
    if (newValue) {
        console.log(newValue);
        //创建一个Heatmap图层
        vector.value = new ol.layer.Heatmap({
            //矢量数据源（读取本地的KML数据）
            source: new ol.source.Vector({
                url: 'src/components/Event/hotvector.kml',
                format: new ol.format.KML({
                    extractStyles: false
                })
            },),
            //热点半径
            radius: parseInt(radiusValue.value, 10),
            //模糊尺寸
            blur: parseInt(blurValue.value, 10)
        });
        //为矢量数据源添加addfeature事件监听
        vector.value.getSource().on('addfeature', function (event) {
            //要素的名称属性
            var name = event.feature.get('name');
            //得到要素的地震震级属性（magnitude）
            var magnitude = parseFloat(name.substr(2));
            //设置要素的weight属性
            event.feature.set('weight', magnitude - 5);
        });
        map.value.addLayer(vector.value);
    }
})
//设置热点图层的模糊尺寸
const radiusChange = value => {
    console.log(value);
    vector.value.setRadius(parseInt(value, 10));
}
//设置热点图层的热点半径
const blurChange = value => {
    vector.value.setBlur(parseInt(value, 10));
}
</script>
<style>

</style>